<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <section style="padding-top: 70px">
                <div class="container">
                    <div class="play row">
                        <div class="col-md-12">
                            <p:messages autoUpdate="true" />
                            <div class="col-md-12" style="background-color: white;">
                                <div class="col-md-12">
                                    <div class="box col-md-9">
                                        <div class="col-md-3 icon-loterys #{managerAposta.loteria.cod}"></div>
                                        <div class="col-md-6 jackpot ">

                                            <span class="simbolo" style="float:left; position: absolute">
                                                #{managerAposta.jogo.jackpotCurrency}
                                            </span>
                                            <h:outputText class="number" value="#{managerAposta.jogo.jackpotNumber}"/>
                                            <span class="text" >
                                                #{managerAposta.jogo.jackpotText}
                                            </span>
                                        </div>
                                        <div class="col-md-3 info">
                                            <h:inputHidden id="expiraem" value="#{managerAposta.expiraEm}" />
                                            <span>
                                                O Sorteio fechará em <span id="sessao"></span>
                                                <h:outputText  rendered="false" value="#{managerAposta.jogo.dataExpiracao}">
                                                    <f:convertDateTime pattern="EEEE HH:mm:ss" />
                                                </h:outputText>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <h:form id="formloteria">
                                    <div class="col-md-5">
                                        <button class="button-green">
                                            <i class="fa fa-refresh"></i>
                                            #{languagem['jogo.jogadaaleatoria']}
                                        </button>
                                        <button class="button-green">
                                            <i class="fa fa-heart"></i>
                                            Usar números da sorte
                                        </button>
                                        <p:commandLink styleClass="limpar button-green" process="@this" update="@this"
                                                       onclick="clearPlay(#{managerAposta.loteria.maxLinhasAposta});">
                                            <i class="fa fa-trash-o"></i>
                                        </p:commandLink>
                                    </div>

                                    <div class="clearfix"/>


                                    <div class="col-md-12">

                                        <c:forEach var="t" begin="1" end="#{managerAposta.loteria.maxLinhasAposta}" step="1">
                                            <div id="linha-#{t}" class="linha col-md-2" >

                                                <p:commandLink styleClass="aleatorio">
                                                    <span>#{languagem['jogo.aleatorio']}</span>
                                                </p:commandLink>
                                                <p:commandLink styleClass="limpar" process="@this" update="@this" onclick="clearLinha(#{t});">
                                                    <i class="fa fa-trash-o"></i>
                                                </p:commandLink>
                                                <div class="clearfix"/>
                                                <div id="choosen-#{t}" class="choose">
                                                    <p>#{languagem['escolha']} <span id="num-#{t}"></span></p>
                                                </div>
                                                <div id="numeros">
                                                    <c:forEach var="l" begin="1" end="#{managerAposta.loteria.qtdNumeros}" step="1">
                                                        <div data-table='#{t}' data-value='#{l}'>#{l}</div>
                                                    </c:forEach>  
                                                </div>
                                                <div id="choosebe-#{t}"  class="choose">
                                                    <p>#{languagem['escolha']} <span id="be-#{t}"></span></p>
                                                </div>
                                                <div id="bolaextra">
                                                    <c:forEach var="b" begin="1" end="#{managerAposta.loteria.qtdBolaExtra}" step="1">
                                                        <div data-table='#{t}' data-value='#{b}'>#{b}</div>
                                                    </c:forEach>                                
                                                </div>
                                                <div class="numlinha col-md-3">
                                                    #{t}
                                                </div>
                                            </div>
                                        </c:forEach>
                                    </div>
                                    <div class="col-md-4">
                                        <p:selectBooleanCheckbox value="#{managerAposta.multiplicador}"
                                                                 itemLabel="#{languagem['multiplicador']} - #{managerAposta.loteria.nomeMultiplicador}"
                                                                 label="#{languagem['multiplicador']} - #{managerAposta.loteria.nomeMultiplicador}" style="margin-right: 3px;">
                                            <p:ajax update="@this, :formloteria:valores" />
                                        </p:selectBooleanCheckbox>
                                        <h:outputText value="" />

                                        <h:inputHidden id="ticket" value="#{managerAposta.ticket}" />
                                    </div>
                                    <p:panel id="valores" styleClass="box resumeplay col-md-8" >
                                        <div class="col-md-9">
                                            <div class="col-md-5 txtright">
                                                <h:outputText value="#{languagem['valorticket']}:"/>
                                            </div>
                                            <div class="col-md-7">
                                                <h:outputText
                                                    styleClass="green" 
                                                    value="#{!managerAposta.multiplicador ? (managerAposta.precoLoteria.valorAposta)
                                                             : managerAposta.precoLoteria.valorAposta.add(managerAposta.precoLoteria.valorMultiplicador)}" >
                                                    <f:convertNumber type="currency" />
                                                </h:outputText>
                                                <h:outputText styleClass="green" value=" X #{managerAposta.loteria.maxLinhasAposta} #{languagem['linhas']}"/>
                                            </div>
                                            <div class="col-md-12"></div>
                                            <div class="col-md-5 txtright">
                                                <h:outputText value="Total:"/>
                                            </div>
                                            <div class="col-md-7">
                                                <h:outputLabel 
                                                    value="#{!managerAposta.multiplicador ? 
                                                             (managerAposta.loteria.maxLinhasAposta * (managerAposta.precoLoteria.valorAposta))
                                                             :((managerAposta.loteria.maxLinhasAposta *(
                                                             managerAposta.precoLoteria.valorAposta.add(managerAposta.precoLoteria.valorMultiplicador))))}" >
                                                    <f:convertNumber type="currency" />
                                                </h:outputLabel>
                                            </div>
                                        </div>
                                        <p:commandButton value="#{languagem['jogar']}"  styleClass="button-green col-md-2"
                                                         onclick="setTicket();" actionListener="#{managerAposta.jogar()}"/>
                                    </p:panel>
                                    <script src="media/scripts/gameMount.js"/>
                                    <script>
                                        $(document).ready(function() {
                                            gameMount(#{managerAposta.loteria.maxLinhasAposta}, #{managerAposta.loteria.limiteNumeros}, #{managerAposta.loteria.limiteBolaExtra});
                                            logoSmall();
                                        });
                    
                                        function setTicket(){
                                            var data = submitTicket();
                                            $('#formloteria\\:ticket').val(data);
                                        }
                    
                                    </script>

                                    <script type="text/javascript">

                                        var tempo = new Number();
                                        // Tempo em segundos
                                        

                                        function startCountdown(){

                                            // Se o tempo não for zerado
                                            tempo = $('#expiraem').val();
                                            
                                            if((tempo - 1) >= 0){
                                                
                                                var seg = tempo;
                                                
                                                // dias
                                                var dias = parseInt(tempo/86400);
                                                //horas
                                                var horas = parseInt(tempo/3600);
                                                
                                                seg = seg % 3600;
                                                
                                                // minutos
                                                var min = parseInt(seg/60);
                                                
                                                // segundos
                                                seg = seg%60;

                                                // Formata o número menor que dez, ex: 08, 07, ...
                                                if(10 > min){
                                                    min = "0"+min;
                                                    min = min.substr(0, 2);
                                                }
                                                if(9 >= seg){
                                                    seg = "0"+seg;
                                                }

                                                // Cria a variável para formatar no estilo hora/cronômetro
                                                horaImprimivel = "";
                                                if(dias > 0){
                                                    horaImprimivel = dias + (dias > 1 ? " Dias ": " Dia ");
                                                    horas -= dias * 24;
                                                }
                                                
                                                horaImprimivel += horas+':' + min + ':' + seg;
                                                //JQuery pra setar o valor
                                                $("#sessao").html(horaImprimivel);

                                                // Define que a função será executada novamente em 1000ms = 1 segundo
                                                setTimeout('startCountdown()',1000);

                                                // diminui o tempo
                                                tempo--;
                                                $('#expiraem').val(tempo);
                                                // Quando o contador chegar a zero faz esta ação
                                            } else {
                                                //AÇÃO
                                            }

                                        }

                                        // Chama a função ao carregar a tela
                                        startCountdown();

                                    </script>
                                </h:form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </ui:define>
    </ui:composition>
</html>
